<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>计时计数器</title>
    <!-- 这里可以添加CSS样式 -->
    <style>
        /* 添加一些基本样式 */
        body { font-family: Arial, sans-serif; background-color: rgb(127, 255, 127);}
        .timer { font-size: 2em; text-align: center; }
        #stopAfterSeconds { text-align: center;font: bold; font-size: 48px; }
        .commonStyle { text-align: center;font: bold; font-size: 64px; }
        a {
          margin-right: 12px;
        }
    </style>
    
</head>
<body>
  <div style="text-align: center;font-size: larger;font-weight: bold;">1 计时器</div>
  <div class="timer" id="timerDisplay" style="font: bold; font-size: 220px;">00:00:00</div>
  <div class="commonStyle">
    停止时间（秒）: <input type="number" id="stopAfterSeconds" style="width: 128px;" min="0" value="360">
  </div>
  <div style="text-align: center;font: bold; font-size: 64px;">
    <a id="toggleTimerLink" href="#">开始/暂停</a>&nbsp;&nbsp;
    <a id="resetTimerLink" href="#">重置</a>
  </div>
  <audio id="startSound" src="start.wav" preload="auto"></audio>
  <audio id="endSound" src="end.wav" preload="auto"></audio>
  <audio id="xiSound" src="xi.m4a" preload="auto"></audio>
  <audio id="huSound" src="hu.m4a" preload="auto"></audio>
  <audio id="lightMusic" src="lightMusic.mp3" preload="auto"></audio>
  <div style="text-align: left;font: bold; margin:auto; margin-top: 10px; width: 547px;">
    背景轻音乐操作：
    <a href="#" onclick="increaseVolume()">增大音量</a>
    <a href="#" onclick="decreaseVolume()">减小音量</a>
    <a href="#" onclick="setVolume(0.5)">设置音量为50%</a>
    <a href="#" onclick="muteAudio('lightMusic')">静音</a>
    <a href="#" onclick="unmuteAudio('lightMusic')">取消静音</a>
  </div>
  <div style="text-align: left;font: bold; margin:auto; margin-top: 10px; width: 635px;">
    &nbsp;&nbsp;&nbsp;是否关闭背景轻音乐：
    <input type="checkbox" style="cursor: pointer;" onclick="toggleMuteAudio(this, 'lightMusic')"></input>
    <br/>
    &nbsp;&nbsp;&nbsp;是否关闭吸的音频和呼的音频：
    <input type="checkbox" style="cursor: pointer;" onclick="toggleMuteAudio(this, 'xiSound', 'huSound')"></input>
  </div>
  <hr/>
  <div style="text-align: center;font-size: larger;font-weight: bold;">2 计数器（→、↑：递增；←、↓：递减；Ctrl键：重置）</div>
  <div style="text-align: center;font-size: larger;font-weight: bold; margin-top: 10px;">
    计数: <span id="countNum" style="border-bottom: 1px solid purple;">0</span>
  </div>

  <script>
    /**
     * 计时器
     */
    let startTime = 0;
    let elapsedTime = 0; // 当前流逝时间（毫秒）
    let xihuStartTime = 0; // 用于获取当前吸、呼的流逝时间（毫秒），每次暂停都要重置为0
    let xihuElapsedTime = 0; // 用于获取当前吸、呼的流逝时间（毫秒），每次暂停都要重置为0
    let targetElapsedTime = 0; // 目标时间（毫秒）
    let timerInterval;
    // let xiInterval;
    // let huInterval;
    let xihuInterval;
    // let lightMusicInterval;
    let continueLightMusicFlag = true; // 是否循环播放轻音乐的标志

    // 注意：setInterval函数，是隔了指定时间之后，再执行，而非立即执行然后每隔指定时间执行
    function startTimer() {
      continueLightMusicFlag = true;
      setTargetTime(); // 在启动计时器时设置目标时间
      startTime = Date.now() - elapsedTime;
      xihuStartTime = Date.now() - xihuElapsedTime;
      xihu();
      xihuInterval = setInterval(xihu, 4000);// 每隔4秒，调用腹式呼吸法函数
      timerInterval = setInterval(updateTimer, 100);
      playAudio('startSound'); // 开始计时时播放音频
      playLightMusic('lightMusic'); // 期间持续循环播放舒缓的轻音乐
      // lightMusicInterval = setInterval(playAudio('lightMusic'), 500);
    }

    function pauseTimer() {
      clearInterval(timerInterval);
      clearInterval(xihuInterval);
      timerInterval = null;
      xihuInterval = null;
      xihuStartTime = 0;
      xihuElapsedTime = 0;
      pauseAllAudios();
      continueLightMusicFlag = false;
    }

    function resetTimer() {
      clearInterval(timerInterval);
      // clearInterval(xiInterval);
      // clearInterval(huInterval);
      clearInterval(xihuInterval);
      // clearInterval(lightMusicInterval);
      timerInterval = null;
      // xiInterval = null;
      // huInterval = null;
      xihuInterval = null;
      // lightMusicInterval = null;
      elapsedTime = 0;
      xihuStartTime = 0;
      xihuElapsedTime = 0;
      document.getElementById('timerDisplay').textContent = '00:00:00';
      targetElapsedTime = 0; // 重置目标时间
      stopAllAudios();
      continueLightMusicFlag = false;
    }

    function toggleTimer() {
      // console.log('timerInterval = ', timerInterval);
        if (timerInterval) {
            pauseTimer();
        } else {
            startTimer();
        }
    }

    function updateTimer() {
        elapsedTime = Date.now() - startTime;
        const timeString = formatTime(elapsedTime);
        document.getElementById('timerDisplay').textContent = timeString;

        if (elapsedTime >= targetElapsedTime && targetElapsedTime > 0) {
          // pauseTimer();
          resetTimer();
          playEndSound();
        }
        // console.log('startTime = ', startTime);
        // console.log('elapsedTime = ', elapsedTime);
        // console.log('timeString = ', timeString);
        // console.log('targetElapsedTime = ', targetElapsedTime);
    }

    // 腹式呼吸法：从计时开始，播放吸的音频，过4s播放呼的音频，过8s播放吸的音频，过4s播放呼的音频，如此循环，直到计时结束
    /**
     * 呼吸节奏（即播放吸呼音频的节奏）如下:
     * 0   4   12  16  24
     * xi  hu  xi  hu  xi
     */
    function xihu() {
      xihuElapsedTime = Date.now() - xihuStartTime;
      // console.log('xihuElapsedTime = ', xihuElapsedTime);
      // console.log('cond1: ' + (Math.round(xihuElapsedTime / 1000) % 12));
      // console.log('cond2: ' + ((Math.round(xihuElapsedTime / 1000) - 4) % 12));
      // 如果当前流逝时间是12秒的倍数，则播放吸的音频
      if ((Math.round(xihuElapsedTime / 1000) % 12) === 0) {
        playAudio('xiSound');
      }
      // 如果(当前流逝时间 - 4) 是12秒的倍数，则播放呼的音频
      if (((Math.round(xihuElapsedTime / 1000) - 4) % 12) === 0) {
        playAudio('huSound');
      }
    }

    function formatTime(time) {
      let hours = Math.floor(time / 3600000);
      let minutes = Math.floor((time % 3600000) / 60000);
      let seconds = ((time % 60000) / 1000).toFixed(0);
      return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
    }

    function pad(num) {
      return num.toString().padStart(2, '0');
    }

    function setTargetTime() {
      const stopAfterSeconds = document.getElementById('stopAfterSeconds').value;
      if (stopAfterSeconds) {
          targetElapsedTime = parseInt(stopAfterSeconds) * 1000; // 将秒转换为毫秒
      }
    }
    
    // 播放指定开始音
    function playStartSound() {
      const startSound = document.getElementById('startSound').play();
    }

    // 播放指定结束音
    function playEndSound() {
      let timerDisplay = document.getElementById('timerDisplay').textContent;
      // console.log(timerDisplay);
      // if ('00:00:00' !== timerDisplay) {
      playAudio('endSound');
      // }
    }

    // 播放指定音频
    function playAudio(audioId) {
      document.getElementById(audioId).play().catch(error => {
        console.error('播放音频失败:', error);
      });
    }

    // 停止播放轻音乐
    function stopLightMusic() {
      // clearInterval(lightMusicInterval); // 停止循环
      var lightMusic= document.getElementById('lightMusic');
      lightMusic.pause();
      lightMusic.currentTime = 0; // 可选：将播放位置重置到开头
    }

    function increaseVolume() {
      var audioElement = document.getElementById('lightMusic');
      audioElement.volume += 0.1; // 增加音量
      if (audioElement.volume > 1) audioElement.volume = 1; // 限制最大音量
    }

    function decreaseVolume() {
      var audioElement = document.getElementById('lightMusic');
      audioElement.volume -= 0.1; // 减少音量
      if (audioElement.volume < 0) audioElement.volume = 0; // 限制最小音量
    }

    function setVolume(volume) {
      var audioElement = document.getElementById('lightMusic');
      audioElement.volume = volume; // 设置音量
    }

    // 对指定的多个音频进行静音
    function muteAudio(...audioArr) {
      for (let i = 0; i < audioArr.length; i++) {
        document.getElementById(audioArr[i]).muted = true;
      }
    }

    // 对指定的多个音频取消静音
    function unmuteAudio(...audioArr) {
      for (let i = 0; i < audioArr.length; i++) {
        document.getElementById(audioArr[i]).muted = false;
      }
    }
    
    // 是否普通计时的切换
    function toggleMuteAudio(checkbox, ...audioArr) {
      if (checkbox.checked) {
          // 如果复选框被选中，普通计时，对背景轻音乐、吸音、呼音等进行静音
          console.log('普通计时');
          muteAudio(...audioArr);
      } else {
          // 如果复选框未被选中，对背景轻音乐、吸音、呼音等取消静音
          console.log('腹式呼吸法计时');
          unmuteAudio(...audioArr);
      }
    }

    function pauseAudio(audioId) {
      document.getElementById(audioId).pause();
    }

    function pauseAllAudios() {
      const audioElements = document.getElementsByTagName('audio');
      for (let i = 0; i < audioElements.length; i++) {
          audioElements[i].pause();
      }
    }

    function stopAllAudios() {
      const audioElements = document.getElementsByTagName('audio');
      for (let i = 0; i < audioElements.length; i++) {
          audioElements[i].pause();
          audioElements[i].currentTime = 0; // 将播放位置重置到开头
      }
    }

    async function playLightMusic(audioId) {
      const audioElement = document.getElementById(audioId);
      await audioElement.play().catch(error => {
          console.error('播放音频失败:', error);
      });

      // 等待音频播放完成
      await new Promise(resolve => audioElement.onended = resolve);

      // 等待50毫秒后再次播放
      await new Promise(resolve => setTimeout(resolve, 50));

      // 递归调用自身以实现循环播放
      if (continueLightMusicFlag) {
        playLightMusic(audioId);
      }
    }

    // 绑定开始/暂停事件到a标签
    document.getElementById('toggleTimerLink').addEventListener('click', toggleTimer);
    // 绑定重置事件到a标签
    document.getElementById('resetTimerLink').addEventListener('click', resetTimer);

    /**
     * 计数器
     */
    function incrementCounter() {
      var countNumText = document.getElementById('countNum').textContent;
      var num = parseInt(countNumText) + 1;
      document.getElementById('countNum').textContent = num;
    }

    function decrementCounter() {
      var countNumText = document.getElementById('countNum').textContent;
      var num = parseInt(countNumText) - 1;
      if (num < 0) {
        return;
      }
      document.getElementById('countNum').textContent = num;
    }

    function resetCounter() {
      document.getElementById('countNum').textContent = 0;
    }

    /**
     * 公共方法
     */
    // 监听键盘事件
    document.addEventListener('keydown', function(event) {
      // if (event.code === 'Space') {
      //   event.preventDefault(); // 阻止空格键的默认行为
      //   if (timerInterval) {
      //     pauseTimer();
      //   } else {
      //     startTimer();
      //   }
      // }

      switch (event.code) {
        case 'Space':
          event.preventDefault(); // 阻止键的默认行为
          if (timerInterval) {
            pauseTimer();
          } else {
            startTimer();
          }
          break;
        case 'ArrowUp':
        case 'ArrowRight':
          event.preventDefault(); // 阻止键的默认行为
          incrementCounter();
          break;
        case 'ArrowDown':
        case 'ArrowLeft':
          event.preventDefault(); // 阻止键的默认行为
          decrementCounter();
          break;
        case 'ControlLeft':
        case 'ControlRight':
          event.preventDefault(); // 阻止键的默认行为
          resetCounter();
          break;
        case 'Escape':
          resetTimer(); // 重置计时器
        default:
          // 忽略其他按键
          break;
      }
    });
  </script>
</body>
</html>